<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件修饰符</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--
    Vue中的事件修饰符：
    1.prevent:阻止默认事件（常用） 原生js里面为event.preventDefault()
    2.stop:阻止事件冒泡（常用）
    3.once:事件只触发一次（常用）
    4.capture:使用事件的捕获模式:事件分为捕获阶段和冒泡阶段，事件捕获阶段事件执行顺序是有外向内，就是父向子，冒泡阶段事件执行时由内向外，子向父
    5.self:只有event.target是当前操作元素是才触发事件
    6.passsive:事件的默认行为立即执行，无需等待事件回调执行完毕
    7.native:把Vue的事件当做原生事件使用,用修饰符native
  -->


    <div id='root'>
        <!--1.prevent阻止a标签在点击时跳转页面-->
        <a href="https://www.jianshu.com/" @click.prevent="showInfo($event)">点击信息</a>

        <!--2.stop阻止事件冒泡-->
        <div class="demo" @click="showInfo">
            <button @click.stop="showInfo">阻止事件冒泡</button>
        </div>


        <!--补充:如果既要阻止冒泡又要阻止默认事件连续写-->
        <div class="demo" @click="showInfo">
            <a href="https://www.jianshu.com/" @click.stop.prevent="showInfo">点击信息</a>
        </div>



        <!--3.事件只触发一次-->
        <button @click.once="showInfo">我只触发一次</button>

        <!--4.事件铺获capture-->
        <!--在不加capture时点击showInfo1(2)会打印出的顺序为2,1  正常的冒泡阶段执行-->
        <!--加capture时点击事件会在捕获阶段触发则，打印出来的为1,2-->
        <div class="one" @click.capture="showInfo1(1)">
            <div class="two" @click="showInfo1(2)"></div>
        </div>

        <!--5.self :event.target当前点击的元素:也可以用来阻止冒泡-->
        <div class="demo" @click.self="showInfo">
            <button @click="showInfo">event.target当前点击的元素</button>
        </div>


        <!--5.passsive -->
        <!--@scroll滚动条的滚动-->
        <!--@wheel鼠标滚轮滚动  @wheel.passsive可以不用等1万个字打印完在执行滚动条-->
        <uL class="list" @wheel.passsive="scroll">
            <li>1</li>
            <li>3</li>
            <li>3</li>
            <li>3</li>
        </uL>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {

            },
            methods: {
                showInfo() {
                    alert("ah")
                },
                showInfo1(a) {
                    console.log(a)
                },
                scroll() {
                    //在触发滚轮事件时，控制台打印完这个1万数字完成后，才滚动滚动条，中间有一个时间段，用了passsive无需等待滚动条先滚动在执行那1万个字
                    for (let index = 0; index < 10000; index++) {
                        console.log(index)
                    }
                },


            }
        })
    </script>


    <style>
        .demo {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red
        }
        
        .one {
            width: 200px;
            height: 100px;
            background-color: green;
            margin: 20px;
        }
        
        .two {
            width: 50px;
            height: 50px;
            background: yellow
        }
        
        .list {
            width: 200px;
            height: 200px;
            background: green;
            overflow-y: auto;
        }
        
        .list li {
            width: 200px;
            height: 100px;
        }
    </style>








</body>

</html